<template>
  <div>
    <h3>图片来自于网络(第三方服务器/自己的Nginx服务器)</h3>
    <h3>如果写死,则src不加:</h3>
    <h3>如果绑定变量,则src要加:</h3>
    <el-image style="width: 100px"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"/>
    <h3>图片来自于本地assets(资产)目录</h3>
    <h3>必须用:src=require('图片路径')</h3>
    <!--  相对路径写法:从当前目录开始找, 需要用../../找到assets目录, 至于需要几个../应该根据实际情况来决定 -->
    <el-image style="width: 100px"
              :src="require('../../assets/gg.jpeg')"/>
    <!--  绝对路径写法:从根开始找 @ = /src -->
    <el-image style="width: 100px"
              :src="require('@/assets/gg.jpeg')"/>
    <el-image style="width: 100px"
              :src="require('/src/assets/gg.jpeg')"/>
    <h3>图片绑定变量</h3>
<!--    <el-image style="width: 100px"-->
<!--              :src=" Logo1"/>-->
    <el-image style="width: 100px"
              :src="myLogo"/>

  </div>
</template>

<script>
export default {
  name: "Img01",
  data() {
    return {
      // 直接把图片路径用变量存储是不行的
      // myLogo:'../../assets/imgs/4a731a90594a4af544c0c25941171jpeg.jpeg'

      // 还是要用到require()
      // myLogo: require('../../assets/imgs/4a731a90594a4af544c0c25941171jpeg.jpeg')

      // 把地址用变量存储, 把变量传给require() 也不行
      // 因为根据require()的要求, 参数只能是字符串直接量, 不能是字符串变量
      // path: '../../assets/gg.jpeg',
      // Logo1:require(this.path),// 不可以是字符串变量
      myLogo:require('../../assets/gg.jpeg')
    }
  }
}
</script>

<style scoped>

</style>
